/*
* @Author: wangguanqing 
* @Date: 2018-05-09 11:25:10 
 * @Last Modified by: wangguanqing
 * @Last Modified time: 2018-05-21 18:23:34
*/

<template>
<bg-lay-out :hideTopBar="true" :widthSize="true" :hideMarginLeft="true" :background="'#161431'" :hideMask="true">
<div slot="main" class="components-container qyyxPM-Main" style="width:1920px;min-height:1080px">
      <p class="z_topTitleCon">   
          <span class="z_topTitle">全员营销全年排名</span>&nbsp;&nbsp;
          <span class="dateCircle">
            <el-date-picker :editable="false" :clearable="false" @change="dateChange()" v-model="month" type="month" placeholder="选择月" class='week-con'></el-date-picker>
          </span>
      </p>
      <div class='chart-container'>
          <el-row :gutter="20" style="padding-bottom:2em">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" class="zdgzTable qyyxTable">
                <el-table 
                  @current-change="currentChange"
                  :data="data" 
                  :row-class-name="tableRowClassName"
                  header-row-class-name="myHeadRow" 
                  header-cell-class-name="myHeaderCell"
                  :cell-class-name="tableCellClassName" 
                  class="myTableCss">
                    <el-table-column prop="id" label="排名" header-align="center" align="center" width="80">
                    </el-table-column>
                    <el-table-column prop="departmentName" label="部门" header-align="center" align="center" width="200">
                    </el-table-column>
                    <el-table-column prop="positionName" label="岗位" header-align="center" align="center" width="200">
                    </el-table-column>
                    <el-table-column prop="levelName" label="级别" header-align="center" align="center" width="200">
                    </el-table-column>
                    <el-table-column prop="employeeName" header-align="center" align="center" label="姓名">
                    </el-table-column>
                    <el-table-column prop="parkingNum" header-align="center" align="center" label="车位抵任务">
                    </el-table-column>
                    <el-table-column prop="dealNum" header-align="center" align="center" label="成交套数">
                    </el-table-column>
                    <el-table-column prop="totalNum" header-align="center" align="center" label="成交总套数">
                    </el-table-column>
                    <el-table-column prop="remarks" header-align="center" align="center" label="备注">
                    </el-table-column>
                  </el-table>
              </el-col>
          </el-row>
          <el-row class="zdgzPagination">
            <el-pagination :current-page="page" @current-change="handleCurrentChange" class="pageCon" :page-size="pageSize" layout="prev, pager, next" :total="total">
                  </el-pagination>
          </el-row>
      </div>
  </div>
  </bg-lay-out>
</template>
<script>
import bgLayOut from "@/components/bgLayOut/index";
import { TotalMarketingInfo } from "@/api/keyJob/index";
export default {
  data() {
    return {
      total: 0,
      pickerOption: {
        firstDayOfWeek: 1
      },
      value: "0",
      week: new Date(),
      pageSize: 15, // page组件上一页多少条
      page: 1,
      options: [
        {
          value: "0",
          label: "总排名"
        },
        {
          value: "1",
          label: "中层以上排名"
        },
        {
          value: "2",
          label: "本月有成交名单"
        },
        {
          value: "3",
          label: "中层以上未成交"
        }
      ],
      tableData: [],
      month: new Date(),
      isNewDeal: []
    };
  },
  components: {
    bgLayOut
  },
  computed: {
    data() {
      const self = this;
      if (this.value === "0") {
        // self.tableData
        // return self.solveData(self.tableData)
        var arr = self.tableData.filter(function(d) {
          if (
            Number(d.totalNum) === 0 ||
            d.totalNum === 0 ||
            d.totalNum === "" ||
            d.totalNum === undefined
          ) {
          } else {
            return d;
          }
        });
        return self.solveData(arr);
      } else if (this.value === "1") {
        var arr = self.tableData.filter(function(d) {
          if (
            d.levelName.indexOf("中层") > -1 ||
            d.levelName.indexOf("高层") > -1
          ) {
            return d;
          }
        });
        return self.solveData(arr);
      } else if (this.value === "2") {
        var arr = self.tableData.filter(function(d, index) {
          if (d.isNewDeal) {
            return d;
          }
        });
        return self.solveData(arr);
      } else if (this.value === "3") {
        var arr = self.tableData.filter(function(d) {
          if (d.totalNum != undefined) {
            if (d.totalNum === 0) {
              if (
                d.levelName.indexOf("中层") > -1 ||
                d.levelName.indexOf("高层") > -1
              ) {
                return d;
              }
            }
          }
        });
        return self.solveData(arr);
      }
    }
  },
  methods: {
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 7) {
        return "myCellConBlue";
      } else {
        return "myCellCon";
      }
    },
    tableRowClassName(row, index) {
      // if (this.value === "2") return;
      if (row.row.isNewDeal) {
        return "danger-row";
      } else {
        return "my-table-row";
      }
    },
    selChange() {
      this.page = 1;
    },
    dateChange() {
      this.handleCurrentChange(1);
      this.fetchData();
    },
    currentChange(index) {},
    handleCurrentChange(index) {
      this.page = index;
    },
    async fetchData() {
      try {
        var month = new Date(this.month).getMonth() + 1;
        var year = new Date(this.month).getFullYear();
        var allDays = new Date(year, month, 0).getDate();
        var endTime = year + "-" + month + "-" + allDays;
        var startTime = year + "-" + month + "-" + "1";
        var d = {
          jianDaoTuan: false,
          beginTime: startTime,
          endTime: endTime
        };
        var res = await TotalMarketingInfo(d);
        if (res && res.data) {
          this.tableData = res.data.result;
        }
      } catch (error) {
        console.log(error);
      }
    },
    changeData() {},
    solveData(data) {
      if (data.length === 0) return;
      var self = this;
      var pageNum = self.pageSize; // page组件上一页多少条
      var pageSize = Math.ceil(data.length / pageNum); // 总页数
      this.total = data.length - pageNum > 0 ? data.length : 1;
      var sumPageData = [];
      var a = 0;
      var isNewDeal = [];
      if (pageSize < self.page) {
        self.page = 1;
      }
      var isNewDealId = "";
      data.forEach((item, index) => {
        if (this.value === "0") {
          item.id = item.rankNum;
          item.cid = index + 1;
        } else {
          item.id = index + 1;
          item.cid = index + 1;
        }
        isNewDealId = index + 1;
        if (item.isNewDeal) {
          isNewDeal.push(isNewDealId);
        }
      });
      this.isNewDeal = isNewDeal;
      for (var i = 1; i <= pageSize; i++) {
        if (i <= pageSize) {
          var pageArray = data.slice(a, a + pageNum);
          var obj = {};
          obj.pageArray = pageArray;
          sumPageData.push(obj);
          a = a + pageNum;
        }
      }
      if (self.page === "1") {
        return sumPageData[0].pageArray;
      } else {
        var d = Number(self.page);
        return sumPageData[d - 1].pageArray;
      }
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

<style lang="scss">
@import "../../../../../styles/element-ui/table/zdgzTable.scss";
@import "../../../../../styles/element-ui/pagination/zdgzPagination.scss";
@import "../../../../../styles/element-ui/date/dateCircle.css";
@import "../../../../../styles/pages/workDeployment/_quanyuanyingxiaoPM";
</style>


